{style}
{literal}

.ow_photo_holder {
    border-bottom-width: 1px;
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #292929;
}

.ow_photo_stage {
    min-width: 600px;
    min-height: 400px;
    text-align: center;
    position: relative;
    height: 400px;
}

.ow_photo_img {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    //display: inline;
    overflow: hidden;
}

.ow_photo_helper {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0px;
    zoom: 1;
    //display: inline;
}

.ow_photo_holder .ow_photo_img { max-width: {/literal}{$widthConfig}{literal}px; }

.ow_photo_preload {
    display: none;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
}

.ow_photo_preload .ow_floatbox_preloader{
	margin:33px auto 0 auto;
}

.ow_photo_nav_l{
    position: absolute;
    display: none;
    top: 0px;
    left: 20px;
    width: 15%;
    height: 100%;
    text-align: left;
    background: url("") no-repeat 0px center;
}

.ow_photo_nav_l:hover{
    background: url("") no-repeat 0px center;
}

.ow_photo_nav_r{
    position: absolute;
    display: none; 
    top: 0px;
    right: 20px; 
    height: 100%; 
    width: 75%;
    background: url("") no-repeat right center;
}

.ow_photo_nav_r:hover{
    background: url("") no-repeat right center;
}

.ow_photo_info{
    padding: 8px;
}

.ow_photo_hover_info{
    position: absolute; 
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: url("") repeat 0 0;
    display: none;
}

.ow_photo_hover_info_item{
    padding: 5px 8px;
    display: inline-block;
    color: #fff;
}

.ow_photo_hover_info a{
    color: #fff;
    font-weight: bold;
}

.ow_photo_hover_zoom {
    display: inline-block;
    width: 32px;
    height: 28px;
    background: url("") no-repeat center center;
}

.ow_photo_info_fix{
    max-width: 725px;
    margin: 0px auto;
}

.ow_photo_info_name{
    margin-left: 45px;
    padding-left: 10px;    
}

.ow_photo_info .ow_avatar{
    float:left;
    margin-right: -45px;
}

.ow_photo_context_action {
    position: absolute;
    top: 10px; 
    right: 10px;
    display: none;
}

{/literal}
{/style}

<div id="ow-photo-view">
<div class="ow_photo_holder ow_border">
    <div class="ow_photo_stage"><img src="{$url}" class="ow_photo_img" /><div class="ow_photo_helper"></div></div>
    
    <div class="ow_photo_context_action">{$contextAction}</div>
    
    {if $previousPhoto}<a class="ow_photo_nav_l" href="javascript://" rel="{$previousPhoto.dto->id}"></a>{/if}
    {if $nextPhoto}<a class="ow_photo_nav_r" href="javascript://" rel="{$nextPhoto.dto->id}"></a>{/if}
    
    <div class="ow_photo_hover_info">
        <div class="ow_photo_hover_info_l ow_left ow_hover">
            <span class="ow_photo_hover_info_item">
                {capture name='url'}{url_for_route for="photo_user_album:[user=>$ownerName, album=>`$album->id`]"}{/capture}
                <a href="{$smarty.capture.url}">{$album->name|truncate:60}</a>: 
                {$photoIndex} {text key='photo+of'} {$photoCount}
            </span>
        </div>
        
        {if $fullsizeUrl}
        <div class="ow_photo_hover_info_r ow_right">
            <a class="ow_photo_hover_zoom" href="{$fullsizeUrl}" target="_blank" title="{text key='photo+view_fullsize'}"></a>
        </div>
        {/if}
    </div>
    <div class="ow_photo_preload"></div>
</div>

<div class="ow_photo_info">
    <div class="ow_photo_info_fix clearfix">
        <div class="ow_left ow_superwide ow_break_word">
            {if $photo->description}<p id="photo-description" class="ow_smallmargin">{$photo->description}</p>{/if}
            <p class="ow_small ow_stdmargin ow_remark">{format_date timestamp=$photo->addDatetime}</p>
        </div>
            
        <div class="ow_right ow_supernarrow">
            {block_decorator name='box' type='empty' capEnabled=false addClass='ow_break_word ow_stdmargin clearfix'}
                {decorator name='avatar_item' data=$avatar}
                <div class="ow_photo_info_name">
                    <a href="{$avatar.url}">{$avatar.title}</a>
                </div>
            {/block_decorator}
            
        </div>
        <div class="clr"></div>
        <div class="ow_left ow_superwide ow_break_word">
        	 {$comments}
        </div>
        
        <div class="ow_right ow_supernarrow">
                    {block_decorator name='box' type='empty' capEnabled=false addClass='ow_break_word ow_stdmargin'}
                {$rate}
            {/block_decorator}

            {block_decorator name='box' type='empty' capEnabled=false addClass='ow_break_word ow_stdmargin'}
                {$tags}
            {/block_decorator}

        </div>
        
    </div>      
</div>

</div>